<template>
	<header class="header_nav_container padd100">
		<div class="header_nav hidden-xs-only">
			<div class="logo_container">
				<div
					class="logo_wrapper cursor_class"
					@click="
						() => {
							router.push({ path: '/' })
						}
					"
				>
					<div class="logo">
						<img src="@/assets/images/duck.png" alt="" />
					</div>
					<span>{{ $t('title') }}</span>
				</div>
			</div>
			<div class="menu_container">
				<el-menu
					:default-active="menuActive"
					router
					class="el-menu-demo"
					mode="horizontal"
					@select="handleSelect"
				>
					<el-menu-item index="/">{{ $t('index') }}</el-menu-item>
					<el-menu-item index="/blog">{{ $t('blog') }}</el-menu-item>
					<el-menu-item index="/faq">{{ $t('faq') }}</el-menu-item>
					<el-menu-item index="/download">{{ $t('download') }}</el-menu-item>
				</el-menu>
			</div>
			<div class="user_info_and_search_container">
				<div class="search_wrapper hidden-xs-only hidden-sm-and-down">
					<el-input placeholder="全站搜索博客内容" class="input-with-select">
						<template #append>
							<el-button :icon="Search" />
						</template>
					</el-input>
				</div>
				<div class="user_info_wrapper">
					<template v-if="isLogin">
						<div style="min-width: 106px">
							<el-dropdown @command="handleCommandUserDropDown">
								<div class="el_dropdown_user_info">
									<el-avatar
										v-if="userInfoState"
										:src="proxy.$baseImgUrl + userInfoState.avatar"
										:size="40"
									></el-avatar>
									<span
										v-if="userInfoState"
										style="margin: 0 10px; max-width: 50px"
										class="text_ellipsis"
										>{{ userInfoState.nickName }}</span
									>
									<el-icon class="el-icon--right">
										<arrow-down />
									</el-icon>
								</div>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item command="house" :icon="House">{{
											$t('center')
										}}</el-dropdown-item>
										<el-dropdown-item
											command="exit"
											divided
											:icon="SwitchButton"
											>{{ $t('logout') }}</el-dropdown-item
										>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</template>
					<template v-else>
						<div class="login_btn_group">
							<el-button link @click="router.push('/login')">{{
								$t('login')
							}}</el-button>
							<el-button
								type="primary"
								round
								@click="router.push('/login?activeName=second')"
								>{{ $t('register') }}
							</el-button>
						</div>
					</template>
					<div class="editor">
						<el-button
							type="primary"
							round
							@click="handleClickGotoEditCenter"
							>{{ $t('editor') }}</el-button
						>
					</div>
					<div
						class="hidden-lg-only hidden-xl-only hidden-md-only"
						style="margin-right: 20px"
					>
						<el-button :icon="Search" circle />
					</div>
					<div>
						<el-dropdown @command="handleCommand">
							<span class="el-dropdown-link">
								{{ $t('changeLang') }}
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item
										command="zhCn"
										:disabled="language === 'zhCn'"
										>简体中文</el-dropdown-item
									>
									<el-dropdown-item
										command="zhTw"
										:disabled="language === 'zhTw'"
										>繁体中文</el-dropdown-item
									>
									<el-dropdown-item command="en" :disabled="language === 'en'"
										>English</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</div>
			</div>
		</div>
	</header>
</template>

<script lang="ts" setup>
import {
	ref,
	toRefs,
	getCurrentInstance,
	onMounted,
	reactive,
	computed,
} from 'vue'
import { useStore } from 'vuex'
import router from '@/router/index'
import { ArrowDown, House, SwitchButton } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { getUserInfo } from '@/api/user'
import { ElMessage } from 'element-plus'
const store = useStore()
const { proxy } = getCurrentInstance()
const language = ref(localStorage.getItem('language') || 'zhCn')
defineProps({
	// 导航高亮
	menuActive: {
		type: String,
		default: '/',
	},
})
const userInfoState = computed(() => store.state.userInfo)
const isLogin = computed(() => store.state.isLogin)

/**
 * 跳转创作者中心（后台）
 */
const handleClickGotoEditCenter = () => {
	window.open('http://114.132.240.29:8000')
}
const handleSelect = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
const handleCommand = (command: string) => {
	// ElMessage(`click on item ${command}`)
	proxy.$i18n.locale = command
	language.value = command
	localStorage.setItem('language', command)
}
/**
 * 点击用户头像下拉项
 * @param command
 */
const handleCommandUserDropDown = (command: string) => {
	console.log(command)
	if (command === 'house') {
		router.push({
			name: 'user-center',
			params: {
				id: userInfoState.value?.userId,
			},
		})
	} else if (command === 'exit') {
		localStorage.removeItem('token')
		localStorage.removeItem('userInfo')
		store.commit('updataUser', {})
    store.commit('updateLoginState', false)
		ElMessage({
			message: '退出成功',
			type: 'success',
			duration: 5 * 1000,
		})
		router.push('/login')
	}
}
/**
 * 获取用户信息
 */
const getUserInfoData = async () => {
	if (localStorage.getItem('token')) {
		const { data }: any = await getUserInfo()
		store.commit('updataUser', data)
		store.commit('updateLoginState', true)
		localStorage.setItem('userInfo', JSON.stringify(data))
	} else {
		store.commit('updateLoginState', false)
	}
}
getUserInfoData()
onMounted(() => {})
</script>

<style lang="scss" scoped>
.header_nav_container {
	box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
	height: 56px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	z-index: 1000;

	.header_nav {
		display: flex;
		height: 100%;
	}

	.logo_container {
		display: flex;
		align-items: center;

		.logo_wrapper {
			display: flex;
			align-items: center;
			min-width: 150px;
			margin-right: 20px;

			.logo {
				width: 50px;

				img {
					width: 100%;
				}
			}

			span {
				font-size: 18px;
				font-weight: 700;
				margin-left: 10px;
				color: #444;
			}
		}
	}

	.menu_container {
		flex: 1;
		// 这个属性很关键，影响flex布局的导航响应式 element plus
		min-width: 0;
	}

	.user_info_and_search_container {
		display: flex;
		align-items: center;

		.search_wrapper {
			display: flex;
			align-items: center;
			height: 100%;
			width: 30vw;
		}

		.user_info_wrapper {
			display: flex;
			align-items: center;
			height: 100%;
			padding-left: 50px;
			justify-content: flex-end;

			.editor {
				margin-right: 20px;
			}

			.login_btn_group {
				min-width: 106px;
				margin-right: 20px;
			}

			.el_dropdown_user_info {
				display: flex;
				align-items: center;
				margin-right: 20px;
			}
		}
	}
}

:deep(.el-menu-item.is-active) {
	color: var(--el-menu-active-color);
	border-bottom: 2px solid var(--el-menu-active-color);
}

:deep(.el-menu--horizontal) {
	height: 56px;
	border-bottom: 0;
}
</style>
